<template>
    <div>
<!--        头部-->
        <div>
            <HeaderTitle flagIndex="false" flagCourse="false"></HeaderTitle>
            <ul class="header_main_nav">
                <li><a href="./首页-已登录.html">首页</a></li>
                <li class="header_list_li">
                    <!--                        <a href="#" class="header_list_a">-->
                    <!--                            课程分类-->
                    <!--                        </a>-->
                    <el-dropdown>
                            <span class="el-dropdown-link">
                                <a href="">课程分类</a><i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(item,index) in headerList" :key="index">{{item.subjectTitle}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </li>
                <li><a href="#">专属课程</a></li>
            </ul>
        </div>
<!--        轮播图-->
        <div>
            <el-carousel indicator-position="outside"  class="main_image">
                <el-carousel-item v-for="(item,index) in list1" :key="index">
                    <div class="lunbo" :style="'background-image:url('+item.imgUrlPc+')'"></div>
                </el-carousel-item>
            </el-carousel>
        </div>
<!--        直播课程-->
        <div id="live-box">
            <h2>直播课程</h2>
            <div id="live-content">
                <div id="livePosters">
                    <img :src="imgSrcList[3]" ref="showingImg">
                    <div class="falseBox"></div>
                    <div class="trueBox">
                        <p class="liveTitles" ref="liveTitle">研究生复试之高效准备简历的方法</p>
                        <h3 class="liveSta"><span><i class="el-icon-circle-check"></i>直播结束</span></h3>
                        <el-row>
                            <el-button type="success" class="liveBtn">直播结束</el-button>
                        </el-row>
                    </div>
                </div>
                <div id="liveList">
                    <ul>
                        <li v-for="(item,index) in liveData" :key="index" v-on:mouseover="changeImg(index)" >
                            <span class="greenBlock"></span>
                            <span class="liveStatus">{{item.liveStatus}}</span>
                            <span class="hook"><i class="el-icon-circle-check"></i></span>
                            <span>{{item.livecontent}}</span>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
<!--        免费课程-->
        <course type="free" page-num="1" page-size="10"></course>
        <!--精品课程-->
        <course type="boutique" page-num="3" page-size="5"></course>
        <!--限时折扣课程-->
        <course type="discount" page-num="1" page-size="5"></course>
<!--        底部-->
        <foot></foot>
    </div>
</template>

<script>
    import HeaderTitle from "../../components/headerTitle";
    import course from "../../components/course";
    import foot from "../../components/foot";
    import {indexFirst} from "../../../api";
    // import indexFirst from "../../../api/index"
    export default {
        name: "index",
        components: {
            HeaderTitle,
            course,
            foot,
        },
        data() {
            return {
                flagIndex: false,
                list1: null,
                flagCourse:null,
                isShow: false,
                liveData: [
                    {liveStatus: "直播结束", livecontent: '研究生复试之高效准备简历的方法'},
                    {liveStatus: "直播结束", livecontent: '十大经典排序之Part-6-完结篇'},
                    {liveStatus: "直播结束", livecontent: 'jdk1.8-新特性之函数接口与方法引用'},
                    {liveStatus: "直播结束", livecontent: '高考之殇与痛则思变'},
                ],
                imgSrcList: [
                    'https://online-course.nos-eastchina1.126.net/123-1252130152859566080.png\n',
                    'https://online-course.nos-eastchina1.126.net/数据结构与算法 基础篇 拷贝-1252123020651134976\n' +
                    '.jpg\n',
                    'https://online-course.nos-eastchina1.126.net/%E5%B0%81%E9%9D%A2-1258625253353979904.png',
                    'https://online-course.nos-eastchina1.126.net/直播封面-1254953535796150272.png'
                ],
                headerList:[]
            }

        },
            methods: {
                changeImg(params) {
                    this.$refs.showingImg.src = this.imgSrcList[params];
                    this.$refs.liveTitle.innerText = this.liveData[params].livecontent;
                }
            },
            created() {
            // indexFirst
                indexFirst(1).then(res => {
                    // console.log(111)
                    // console.log(res)
                    this.list1 = res.data
                })
                this.axios.post("http://wkt.myhope365.com/weChat/applet/subject/list",{"enable":1}).then(res=>{
                    // console.log(res.data.rows)
                    this.headerList=res.data.rows
                })
            }

    }
</script>

<style scoped lang="less">
    .main_image {
        /*margin: auto;*/
        width: 100%;
        /*background-sizeX: 100%;*/

    }
    .lunbo {
        height: 340px;
        /*background-repeat: no-repeat;*/
        background-position: center;
    }
    /deep/ .el-carousel__container {
        height: 340px;
    }
    /*直播课程*/
    #live-box{
        margin: 70px auto 0;
        width: 1200px;
        height: 418px;
        overflow: hidden;
        h2{
        margin: 0;
        margin-bottom: 30px;
        font-weight: normal;

        }
    }
    #live-content{
        display: flex;
        width: 100%;
        height: 375px;
    }
    #livePosters,
    #liveList{
        position: relative;
        width: 600px;
        height: 100%;
    }
    #liveList{
        background-color: #f4f4f4;
        width: 600px;
        height: 100%;
        ul{
        padding: 0;
        /*margin-top: 50px;*/
        list-style: none;
        }
        li{
        margin: 20px 0px;
        height: 50px;
        line-height: 50px;
        }
        li:hover{
        color: rgb(81, 190, 126);
        background-color: #ffffff;
            .greenBlock{
            background-color: rgb(81, 190, 126);
            }
        }
    }
    #livePosters>img{
        position: absolute;
        left: 0px;
        width: 600px;
        height: 375px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 0.5;
    }
    .greenBlock{
        display: block;
        float: left;
        width: 5px;
        height: 50px;
        background-color: #f4f4f4;
    }
    .liveStatus{
        margin-left: 50px;
        float: left;
    }
    .hook{
        margin-left: 50px;
        float: left;
    }
    .liveTitles{
        margin-top: 50px;
        position: relative;
        top: 30px;
        z-index: 10;
        font-size: 24px;
        color: white;
    }
    .falseBox{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.5;
    }
    .trueBox{
        position: absolute;
        z-index: 100;
        width: 100%;
        height: 100%;
        text-align: center;
    }
    .liveSta{
        margin-top: 100px;
        margin-bottom: 50px;
        width: 100%!important;
        color: white;
        font-size: 14px;
    }
    .liveBtn{
        width: 240px;
        height: 50px;
        font-size: 18px;
        background-color: rgb(81, 190, 126);
    }
    /*头部导航栏*/
    .header_main_nav {
        margin: 10px auto;
        width: 1200px;
        height: 30px;
        /*float: left;*/
    }
    .header_main_nav a {
        color: #333;
        text-decoration: none;
        font-size: 16px;
    }
    .header_main_nav>li {
        /* width: 32px; */
        margin-right: 30px;
        height: 24px;
        line-height: 24px;
        float: left;
    }
    .header_list_li {
        margin-right: 20px !important;
    }
    .header_main_nav a:hover {

        color: rgb(81, 190, 126);
    }
    .header_list_a {
        position: relative;
    }

    .header_main_nav_list {
        position: absolute;
        background-color: #fff;
        box-shadow: 2px 2px 5px #bbb;
    }
    .header_main_nav_list a,
    .header_car_person_list a {
        padding: 5px 12px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
    }

    .header_main_nav_list>li:hover,
    .header_car_person_list>li>a:hover {
        background-color: #e6fff3;
        color: rgb(81, 190, 126);
    }

</style>